<!-- 个人中心 -->
<template>
  <div>
    <h2 style="color: #595959; margin-bottom: 20px">
      {{ $t("messages.PersonalCenter") }}
    </h2>
    <ul>
      <li>管理员ID：{{ userList.id }}</li>
      <li>账号：{{ userList.account }}</li>
      <li>用户组：{{ userList.userGroup }}</li>
      <li>创建时间：{{ userList.ctime }}</li>
      <li>
        头像：

        <div class="avatar-upload-container">
          <!-- 头像展示区域 -->
          <div class="avatar-wrapper">
            <img
              v-if="userList.imgUrl"
              :src="userList.imgUrl"
              alt="Avatar"
              class="avatar-image"
            />
            <div v-else class="avatar-placeholder">
              <span>暂无头像</span>
            </div>
          </div>

          <!-- 上传头像按钮 -->
          <el-button
            type="primary"
            @click="handleAvatarUpload"
            style="width: 100px; height: 40px"
            >修改头像</el-button
          >

          <!-- 文件上传对话框 -->
          <el-dialog
            title="上传头像"
            v-model="dialogVisible"
            @close="resetPreview"
            width="30%"
          >
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :before-upload="beforeUpload"
              :on-change="handleUploadSuccess"
              accept=".jpg"
            >
              <el-button size="small" type="primary">选择图片</el-button>
            </el-upload>
          </el-dialog>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElUpload, ElButton, ElDialog } from "element-plus";
import { getUserCenter, editAvatar } from "@/api/index.js";
import { onMounted } from "vue";

const userList = ref({});
const avatarUrl = ref(null); // 头像URL
const dialogVisible = ref(false); // 控制对话框的显示
// const uploadUrl = "/api/upload-avatar"; // 这里替换成你的上传接口

// 头像上传时的处理函数
const handleAvatarUpload = () => {
  dialogVisible.value = true; // 打开上传对话框
};

// 关闭对话框时重置预览
const resetPreview = () => {
  avatarUrl.value = null;
};

// 上传前的校验（限制文件格式为 jpg）
const beforeUpload = (file) => {
  const isJpg = file.type === "image/jpeg";
  if (!isJpg) {
    // 显示错误提示
    this.$message.error("只能上传 JPG 格式的图片!");
  }
  return isJpg; // 返回 true 表示可以上传，false 表示阻止上传
};

// 当文件变化时（选择文件后），获取文件名和扩展名
const handleUploadSuccess = async (file) => {
  // 获取文件名和扩展名
  const fileName = file.name; // 获取完整文件名
  console.log("文件名:", fileName);
  // const res = await editAvatar({ imgUrl: "bg-login.jpg" });
  // console.log("🚀 ~ handleUploadSuccess ~ res:", res);
};

onMounted(() => {
  getUserCenter().then((res) => {
    console.log(res.accountInfo);
    res.accountInfo.ctime = res.accountInfo.ctime.slice(0, 10);
    userList.value = res.accountInfo;
    console.log("🚀 ~ getUserCenter ~ userList:", userList.value);
  });
});
</script>

<style scoped lang="less">
.avatar-upload-container {
  display: flex;
  flex-direction: column;
  // align-items: center;
}

.avatar-wrapper {
  width: 150px;
  height: 150px;
  border: 2px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  color: #aaa;
  text-align: center;
  font-size: 14px;
}

.el-button {
  margin-top: 10px;
}

.el-upload {
  text-align: center;
}

.el-dialog {
  padding: 10px;
}
ul {
  li {
    line-height: 50px;
    border-bottom: 1px solid #e7e7e7;
    height: 50px;
    color: #3a3a3a;
  }
}
</style>
